<template>
    <page-container title="面试反馈">

        <el-table :data="feedbackList" style="width: 100%" v-loading="loading">
            <el-table-column type="index" label="序号" width="80"/>
            <el-table-column prop="candidateName" label="候选人" width="120"/>
            <el-table-column prop="positionName" label="应聘职位" width="120"/>
            <el-table-column prop="name" label="面试官" width="120"/>
            <el-table-column label="技能评分" width="280">
                <template #default="{ row }">
                    <div class="scores">
                        <el-tooltip content="专业技术能力">
                            <div class="score-item">
                                <span>专业技术：</span>
                                <el-rate
                                    v-model="row.professionalSkillsScore"
                                    disabled
                                    show-score
                                />
                            </div>
                        </el-tooltip>
                        <el-tooltip content="沟通能力">
                            <div class="score-item">
                                <span>沟通能力：</span>
                                <el-rate
                                    v-model="row.communicationSkillsScore"
                                    disabled
                                    show-score
                                />
                            </div>
                        </el-tooltip>
                        <el-tooltip content="问题解决能力">
                            <div class="score-item">
                                <span>解决能力：</span>
                                <el-rate
                                    v-model="row.problemSolvingSkillsScore"
                                    disabled
                                    show-score
                                />
                            </div>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="overallEvaluation" label="总体评价" show-overflow-tooltip/>
            <el-table-column prop="hiringRecommendation" label="录用建议" width="180">
                <template #default="{ row }">
                    <el-tag :type="getRecommendationType(row.hiringRecommendation)">
                        {{ row.hiringRecommendation }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="反馈时间" width="180">
                <template #default="{ row }">
                    {{ formatDateTime(row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
                <template #default="scope">
                    <el-button-group>
                        <el-button 
                            type="danger" 
                            size="small"
                            @click="handleDelete(scope.row)"
                        >
                            删除
                        </el-button>
                    </el-button-group>
                </template>
            </el-table-column>
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
        </el-table>
        <template #pagination>
            <div class="pagination-container">
                <el-pagination
                    v-show="total > 0"
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </template>
    </page-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import PageContainer from '@/components/PageContainer.vue'
import { getFeedbackList, deleteFeedback } from '@/api/interview'

const feedbackList = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 加载反馈列表
const loadFeedbackList = async () => {
    loading.value = true
    try {
        const res = await getFeedbackList()
        console.log(res)
        if (res.code === 200) {
            feedbackList.value = res.data.records
            total.value = res.data.total
        } else {
            ElMessage.error(res.message || '获取反馈列表失败')
        }
    } catch (error) {
        console.error('获取反馈列表失败：', error)
        ElMessage.error('获取反馈列表失败')
    } finally {
        loading.value = false
    }
}

// 处理删除
const handleDelete = async (row) => {
    try {
        await ElMessageBox.confirm('确定要删除这条反馈记录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        
        const res = await deleteFeedback(row.feedbackId)
        if (res.code === 200) {
            ElMessage.success('删除成功')
            loadFeedbackList()
        } else {
            ElMessage.error(res.message || '删除失败')
        }
    } catch (error) {
        if (error !== 'cancel') {
            console.error('删除失败：', error)
            ElMessage.error('删除失败')
        }
    }
}

// 分页处理
const handleSizeChange = (val) => {
    pageSize.value = val
    currentPage.value = 1
    loadFeedbackList()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    loadFeedbackList()
}

// 获取录用建议的标签类型
const getRecommendationType = (recommendation) => {
    const typeMap = {
        '录用': 'success',
        '备用': 'warning',
        '不录用': 'danger'
    }
    return typeMap[recommendation] || 'info'
}

// 格式化日期
const formatDateTime = (dateStr) => {
    if (!dateStr) return '--'
    const date = new Date(dateStr)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    })
}

onMounted(() => {
    loadFeedbackList()
})
</script>

<style scoped>
.scores {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.score-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-item span {
    width: 70px;
    text-align: right;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

:deep(.el-rate) {
    display: inline-flex;
}
</style>